import { FC, useEffect } from 'react';
import * as echarts from 'echarts';
import type { EChartOption } from 'echarts';
import { TrendChartProps } from '../../types';
import styles from './index.module.css';

const TrendChart: FC<TrendChartProps> = ({ fileIds }) => {
  useEffect(() => {
    const chartDom = document.getElementById('trendChart');
    if (!chartDom) return;

    const chart = echarts.init(chartDom);
    
    // 生成年份数据
    const years = Array.from({ length: 25 }, (_, i) => `${2000 + i}`);
    
    // 关键词及其趋势数据
    const keywords = [
      '人工智能', '大数据', '云计算', '区块链', '5G通信',
      '物联网', '新能源', '智能制造', '生物医药', '半导体',
      '量子计算', '机器学习', '深度学习', '边缘计算', 'VR/AR',
      '自动驾驶', '数字孪生', '网络安全', '芯片设计', '新材料'
    ];

    // 生成模拟数据
    const generateData = (baseValue: number, volatility: number) => {
      return years.map(year => {
        const trend = Math.pow((parseInt(year) - 2000) / 24, 2); // 增长趋势
        const random = (Math.random() - 0.5) * volatility; // 随机波动
        return Math.round(baseValue * (1 + trend + random));
      });
    };

    const series = keywords.map(keyword => ({
      name: keyword,
      type: 'line',
      data: generateData(Math.random() * 20 + 10, 0.5),
      smooth: true,
      showSymbol: false
    }));

    const option: EChartOption = {
      title: {
        text: '关键词趋势分析 (2000-2024)',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        type: 'plain',
        data: keywords,
        bottom: 10,
        orient: 'horizontal',
        formatter: (name: string) => {
          return name.length > 6 ? name.slice(0, 6) + '...' : name;
        },
        textStyle: {
          fontSize: 12,
          color: '#333',
          padding: [2, 4]
        },
        tooltip: {
          show: true,
          formatter: (param: any) => {
            if (typeof param === 'string') {
              return param;
            }
            return param.name;
          }
        },
        itemGap: 16,
        itemWidth: 15,
        itemHeight: 10,
        padding: [24, 10, 0, 10],
        selector: false,
        width: '90%',
        height: 'auto'
      },
      grid: {
        left: '3%',
        right: '4%',
        top: 60,
        bottom: 160,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: years,
        name: '年份'
      },
      yAxis: {
        type: 'value',
        name: '提及频次'
      },
      series,
      dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        bottom: 80,
        backgroundColor: '#f5f5f5',
        fillerColor: 'rgba(24, 144, 255, 0.2)',
        handleStyle: {
          color: '#1890ff'
        },
        textStyle: {
          color: '#666'
        },
        handleIcon: 'M-90 0 L90 0',
        handleSize: 8
      }, {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 100
      }]
    };

    chart.setOption(option);
    
    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);

    return () => {
      chart.dispose();
      window.removeEventListener('resize', handleResize);
    };
  }, [fileIds]);

  return <div id="trendChart" className={styles.chart} />;
};

export default TrendChart; 